var PositionManage = function ( x, y, width, height, fontsize, padding, reso ){
    this.x = x * reso;
    this.y = y * reso;
    this.width = width * reso;
    this.height = height * reso;
    this.fontsize = fontsize * reso;
    this.padding = padding * reso;

    this.changeResolusion = function( reso ){
        this.x = x * reso;
        this.y = y * reso;
        this.width = width * reso;
        this.height = height * reso;
        this.fontsize = fontsize * reso;
        this.padding = padding * reso;
    }
};

var size_index = 0;
var wnd_cmd_pos = new PositionManage( 10, 190, 130, 100, 15, 5, 1.0 );
var wnd_state_pos = new PositionManage( 150, 190, 340, 100, 15, 5, 1.0 );

function sizing(form){
    size_index = form.canvassize.selectedIndex;
    switch(size_index){
    case 0:
        wnd_cmd_pos.changeResolusion(1.0);
        wnd_state_pos.changeResolusion(1.0);
        $("#canvassample").attr({height:300});
        $("#canvassample").attr({width:500});
        break;
    case 1:
        wnd_cmd_pos.changeResolusion(1.2);
        wnd_state_pos.changeResolusion(1.2);
        $("#canvassample").attr({height:360});
        $("#canvassample").attr({width:600});
        break;
    }
}

function window_draw(inst_pos){
    var canvas = document.getElementById('canvassample');
    if(canvas.getContext){
        var context = canvas.getContext('2d');
        context.strokeStyle = 'rgb(255,255,255)';
        context.lineWidth = 3;
        context.strokeRect(inst_pos.x, inst_pos.y, inst_pos.width, inst_pos.height);

        context.beginPath();
        var gradient;
        gradient = context.createLinearGradient(0, inst_pos.y, 0, inst_pos.y + inst_pos.height);
        gradient.addColorStop(0.0, 'rgb(00,00,255)');
        gradient.addColorStop(1.0, 'rgb(128,128,255)');
        context.fillStyle = gradient;
        context.rect(inst_pos.x, inst_pos.y, inst_pos.width, inst_pos.height);
        context.fill();
        
    }
}

function cmd_draw(inst_pos){
    var canvas = document.getElementById('canvassample');
    if(canvas.getContext){
        var context = canvas.getContext('2d');

        context.fillStyle = "white";
        context.textAlign = "left";
        context.textBaseline = "top";
        context.font = inst_pos.fontsize.toString(10) + "px" + " 'ＭＳ ゴシック'";
        var string_pos = inst_pos.y + inst_pos.padding;
        var string_w = inst_pos.width - (inst_pos.padding * 2);
        context.fillText("リファクタ♪", inst_pos.fontsize, string_pos, string_w);
        string_pos = string_pos + inst_pos.fontsize + inst_pos.padding;
        context.fillText("コーディング", inst_pos.fontsize, string_pos, string_w);
    }
}

function test(){
    window_draw(wnd_cmd_pos);
    cmd_draw(wnd_cmd_pos);
}

function test2(){
    window_draw(wnd_state_pos);
    cmd_draw(wnd_state_pos);
}

function test3(){
    alert( "x座標：" + inst_pos.x + "\ny座標：" + inst_pos.y + "\n幅：" + inst_pos.width + "\n高さ：" + inst_pos.height);
}
